<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/node_modules/mditor/dist/css/mditor.min.css">
  <script src="/node_modules/mditor/dist/js/mditor.min.js"></script>
</head>

<body>
  <!-- 引入公共导航顶部 -->
  <%- include('../layout/header.ejs')%>


  <div class="container-fluid">
    <h1>发表文章页</h1>
    <hr>

    <form id="form">

      <div class="form-group">
        <label for="">文章标题：</label>
        <input type="text" name="title" id="title" class="form-control" required maxlength="30" value="<%= article.title %>">
      </div>

      <div class="form-group">
        <label for="">文章内容：</label>
        <!--mditor  -->
        <textarea name="content" id="editor" class="form-control"><%= article.content %></textarea>
      </div>

      <div class="form-group clearfix">
        <input type="submit" value="发表文章" class="btn btn-primary pull-right">
      </div>
    </form>
  </div>

  <!-- 引入公共底部 -->
  <%- include('../layout/footer.ejs')%>

</body>
<script>
  $(function () {
    // 富文本框初始化设置
    // 创建 Mditor 实例
    var mditor = Mditor.fromTextarea(document.getElementById('editor'));

    // 监听表单提交
    $('#form').on('submit', function (event) {
      // 阻止表单get默认请求方式
      event.preventDefault();

      // 异步ajax请求
      $.ajax({
        type: 'post',
        url: '/edit/post',
        data: {
         title:$('#title').val(),
         content: mditor.value,
         id:'<%= article.id%>',
         userId: '<%= user.id%>'     
        },
        dataType: 'json',
        success: function (res) {
          if(res.status == 0){
            alert(res.msg);
          }else {
            location.href = `/article/detail?id=${res.articleId}`;
          };
        }
      });
    });
  })
</script>

</html>